<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>左树右表</title>
    <!-- 引入 layui 样式文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/layui/2.5.7/css/layui.min.css">
    <!-- 引入自定义样式文件 -->
    <style>
        /* 左树右表容器 */
        .tree-container {
            border: 1px solid #e6e6e6;
            border-radius: 2px;
            overflow: hidden;
            width: 100%;
            height: calc(100vh - 50px);
        }
        /* 左侧树形菜单容器 */
        .tree-container .layui-col-md4 {
            background-color: #f2f2f2;
            padding: 10px;
            height: 100%;
        }
        /* 右侧表格容器 */
        .tree-container .layui-col-md8 {
            padding: 10px;
            height: 100%;
        }
        .layui-table thead th {
            font-weight: bold;
        }
        /* 查询表单容器 */
        .search-form {
            margin-bottom: 10px;
        }
        /* 查询按钮 */
        .search-btn {
            margin-left: 10px;
        }

        .layui-tree-txt {
            font-size: 16px; /* 设置字体大小为16像素 */
            font-weight: bold; /* 加粗字体 */
        }
    </style>
</head>
<body style="background-color: #2a2a2a">
<div class="layui-container" style="width: 100%;margin-top: 25px; background-color: #ffffff">
    <div class="layui-row">
        <div class="layui-col-md12" >
            <div class="tree-container">
                <div class="layui-row">
                    <!-- 左侧树形菜单容器 -->
                    <div class="layui-col-md2" style="height: 800px">
                        <ul id="tree"></ul>
                    </div>
                    <!-- 右侧表格容器 -->
                    <div class="layui-col-md10" style="height: 800px">
                        <!-- 查询表单容器 -->
                        <div class="search-form">
                            <form class="layui-form">
                                <div class="layui-form-item">
                                    <div class="layui-input-inline">
                                        <input type="text" name="name" placeholder="ONUIP" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-input-inline">
                                        <button class="layui-btn search-btn" lay-submit lay-filter="searchForm">查询</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- 表格容器 -->
                        <table class="layui-table" lay-even  id="table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入 layui JavaScript 文件 -->
<script src="https://cdn.bootcss.com/layui/2.5.7/layui.all.js"></script>
<script src="./layui/css/jquery.js"></script>

<script>
    layui.use(['form', 'table', 'tree','jquery','layer'], function () {
        var ipSel="";
        var name="";
        var code="";
        var treeId="";
        var form = layui.form;
        var table = layui.table;
        var tree = layui.tree;
        var $=layui.jquery;
        var layer=layui.layer;
        // 模拟数据
        var treeDate=[
            {title: '数据查询', id: 1, spread:true,children: [
                    {title: 'PON_专业设备的上联口信息', id: 11
                    },
                    {title: '单板信息', id: 12},
                    {title: '在线用户数', id: 13},
                    {title:'光模块信息',id:14},
                    {title:'网元设备信息',id:15}
                ]},
            {
                title: '用户管理', id: 2, children: []

            }
        ]

        // 渲染树形菜单
        tree.render({
            elem: '#tree',
            data: treeDate,
            // defaultExpandAll: true,
            click: function (obj) {

                // 点击树节点时触发事件，可以在此处根据节点的id加载对应的数据到表格中
                console.log(obj);
                switch (obj.data.id){
                    case 11:code= "RES_PON_SLK_INFO"; break;
                    case 12:code= "RES_PON_DB"; break;
                    case 13:code= "RES_PON_ONU_ZX_NUM"; break;
                    case 14:code= "RES_PON_DOM"; break;
                    case 15:code= "last"; break;
                }
                var lastData=selDate(code,ipSel)
                treeId=obj.data.id;
                renderTable(lastData,treeId);
            }
        });

        function selDate(code,ip){
            var lastDate=[];
            //查询数据
            $.ajax({
                type: "POST",
                url: `/qhdx/5gc/fiveGcQuery`,
                dateType: 'json',
                async: false,
                data:JSON.stringify({
                    "apicode":code,
                    "ip":ip
                }),
                headers: {
                    "Content-Type": "application/json; charset=utf-8"
                },
                success: (res) => {
                    lastDate=res.data;
                }
            })
            return lastDate;
        }

        // 渲染表格
        function renderTable(data,id) {
            var cols=tableCols(id);
            table.render({
                elem: '#table',
                height: 'full-30',
                size:'lg',
                cols: cols,
                data: data,
                page: true,
                limit: 10
            });
        }

        //表头
        function tableCols(str){
            var lastStr=[];
            //上联口信息查询
            var tabCols_one=[
                [
                    { field: 'ONUIP', title: 'ONUIP' },
                    { field: 'SERIALNO', title: '工单号' },
                    { field: 'deviceCode', title: '设备编码' },
                    { field: 'SERIALNO', title: '上联口信息' }
                ]
            ];
            //RES_PON_ONU在线用户数_查询
            var tabCols_two=[
                [
                    { field: 'DEVICEIP', title: 'DEVICEIP' },
                    { field: 'deviceCode', title: '设备编码' },
                    { field: 'OLTID', title: 'OLTID' },
                    { field: 'SLOTID', title: 'SLOTID' },
                    { field: 'FRAMEID', title: 'FRAMEID' },
                    { field: 'TOTALNUM', title: 'TOTALNUM' },
                    { field: 'ONLINENUM', title: 'ONLINENUM' }
                ]
            ];
            //RES_PON_单板信息_查询
            var tabCols_three=[
                [
                    { field: 'ONUIP', title: 'ONUIP' },
                    { field: 'deviceCode', title: '设备编码' },
                    { field: 'CPU', title: 'CPU' },
                    { field: 'MEM', title: 'MEM' },
                    { field: 'PNUM', title: 'PNUM' },
                    { field: 'BSTAT', title: 'BSTAT' },
                    { field: 'HWVER', title: 'HWVER' },
                    { field: 'SWVER', title: 'SWVER' },
                    { field: 'BOARDID', title: 'BOARDID' },
                    { field: 'BSERVICE', title: 'BSERVICE' },
                    { field: 'BOARDINFO', title: 'BOARDINFO' },
                    { field: 'BOARDTYPE', title: 'BOARDTYPE' }

                ]
            ];
            //RES_PON_网元设备信息_查询
            var tabCols_four=[
                [
                    { field: 'ONUIP', title: 'ONUIP' },
                    { field: 'deviceCode', title: '设备编码' },
                    { field: 'SERIALNO', title: '工单号' },
                    { field: 'DT', title: 'DT' },
                    { field: 'CPU', title: 'CPU' },
                    { field: 'MEM', title: 'MEM' },
                    { field: 'DEVER', title: 'DEVER' },
                    { field: 'DEVIP', title: 'DEVIP' },
                    { field: 'DEVNAME', title: 'DEVNAME' },
                    { field: 'RESUTID', title: 'RESUTID' },
                    { field: 'PARAMETER1', title: 'PARAMETER1' },
                    { field: 'PARAMETER2', title: 'PARAMETER2' },
                    { field: 'RESULTDESC', title: 'RESULTDESC' },
                    { field: 'TEMPERATURE', title: 'TEMPERATURE' }
                ]
            ];
            //RES_PON_光模块DDM信息_查询
            var tabCols_five=[
                [
                    { field: 'OLTID', title: 'OLTID' },
                    { field: 'deviceCode', title: '设备编码' },
                    { field: 'SERIALNO', title: '工单号' },
                    { field: 'RXPOWER', title: 'RXPOWER' },
                    { field: 'TXPOWER', title: 'TXPOWER' },
                    { field: 'VOLTAGE', title: 'VOLTAGE' },
                    { field: 'PRXPOWER', title: 'PRXPOWER' },
                    { field: 'DEVNAME', title: 'DEVNAME' },
                    { field: 'TXPOWERR', title: 'TXPOWERR' },
                    { field: 'VOLTAGER', title: 'VOLTAGER' },
                    { field: 'CURRTXBIAS', title: 'CURRTXBIAS' },
                    { field: 'CURRTXBIASR', title: 'CURRTXBIASR' },
                    { field: 'TEMPERATURE', title: 'TEMPERATURE' },
                    { field: 'TEMPERATURER', title: 'TEMPERATURER' }
                ]
            ];
            switch (str){
                case 11:lastStr= tabCols_one; break;
                case 12:lastStr= tabCols_three; break;
                case 13:lastStr= tabCols_two; break;
                case 14:lastStr= tabCols_five; break;
                case 15:lastStr= tabCols_four; break;
            }
            return lastStr;

        }

        // 监听表单提交事件
        form.on('submit(searchForm)', function (data) {
            if(treeId==""||treeId==null){
                layer.msg("请选择数据类型");
                return false;
            }
            ipSel = data.field.name;
            // 在此处编写查询逻辑，得到查询结果后渲染表格
            var lastData=selDate(code,ipSel);
            renderTable(lastData,treeId);
            return false;
        });
    });
</script>
</body>
</html>